<template>
    <h3 class="text-base font-bold mt-[15px] component-title">
        <img class="w-[24px] h-[24px]" :src="Icon" />
        <div>{{ title }}</div>
        <div class="titleIntro">{{ tip }}</div>
    </h3>

    <!--    输入框    -->
    <l-textarea v-model="value" maxlength="1024" :rows="6" :clearable="true" :show-word-limit="false" :contentStyle="{
            width: '384px',
            height: '77px',
            fontFamily: 'PingFang SC, PingFang SC',
            fontWeight: '400',
            fontSize: '12px',
            background: '#121318',
            color: '#616772',
            lineHeight: '14px'
        }" :customStyle="{
            borderColor: '#000',
            color: '#fff',
            paddingBottom: '4px',
            background: '#121318'

        }" :placeholder="placeholder">
        <template #length-suffix>
            <div class="length-suffix justify-end">
                <el-button v-if="appStore?.getDrawConfig?.translate_type == 2" type="default" :link="true"
                    class="ml-[10px]" :icon="Switch" :loading="isTranslate" @click="translatePrompt()">

                </el-button>
                <el-button type="default" :link="true" class="ml-[10px]" :icon="CopyDocument"
                    @click="copyContent(value)">

                </el-button>
                <el-button type="default" :link="true" class="ml-[10px]" :icon="Delete" @click="value = ''">

                </el-button>
            </div>
        </template>
    </l-textarea>
</template>

<script setup lang="ts">
import { useAppStore } from '~/stores/app'
import { useVModels } from '@vueuse/core'
import Icon from '@/assets/images/drawing/icon_prompt.png'
import { keywordPromptTranslate } from '~/api/drawing'
import { Delete, Switch, CopyDocument } from '@element-plus/icons-vue'
const appStore = useAppStore()
const emit = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()
const props = withDefaults(
    defineProps<{
        modelValue?: any,
        placeholder?: string,
        title?: string,
        tip?:string,
    }>(),
    {
        modelValue: '',
        placeholder: '',
        title: '',
        tip:'',
    }
)
const { modelValue: value, placeholder, title } = useVModels(props, emit)

const { isLock: isTranslate, lockFn: translatePrompt } = useLockFn(async () => {
    try {
        if (value.value.trim() == '') {
            feedback.msgError('请输入描述词')
            return
        }
        const { promptEn } = await keywordPromptTranslate({
            prompt: value.value
        })
        value.value = promptEn
    } catch (error) {
        console.log('翻译失败=>', error)
    }
})
//复制文本
const { copy } = useCopy()
const copyContent = async (content: string) => {
    await copy(content)
}
</script>

<style lang="scss" scoped>
.component-title {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    height: 20px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 16px;
    text-align: left;
    font-style: normal;
    text-transform: none;

    .titleIntro {
        margin-left: 8px;
        height: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 10px;
        color: #616772;
        line-height: 12px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
}

.length-suffix {
    position: absolute;
    bottom: 0;
    left: 0px;
    font-size: 14px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 30px;
    background:var(--el-bg-color-base);

}
</style>
